{% load static %}
<link rel="stylesheet" href="{% static 'mr-editor/mreditor.css' %}?version={{mrdoc_version}}" />
<script src="{% static 'mr-marked/marked.min.js' %}?version={{mrdoc_version}}"></script>
<script src="{% static 'mr-editor/mreditor.js' %}?version={{mrdoc_version}}"></script>
<script>
    // 视频iframe域名白名单
    var iframe_whitelist = '{{ iframe_whitelist }}'.split(',')
    var md_changed = false; //初始化一个变量，用于判断编辑器是否修改
    var screen_width = window.matchMedia('(max-width: 768px)'); // 获取屏幕宽度
    //初始化editormd
    if(screen_width.matches){
        var editormd_watch = false;
        var editormd_height = window.innerHeight / 2 + 'px';
        var editormd_toobar = [
                    "h2","h3", "bold", "del", "italic", "quote","kaiSpan",
                    "list-ul", "list-ol", "hr", "link",
                    "mindmap","echart","imgUpload", "attachment" ,"multimedia","code", "code-block", "htmltable",
                    "emoji", "pagebreak",
                    "watch", "preview",
            ];
    }else{
        var editormd_watch = true;
        var editormd_height = window.innerHeight - 150 + 'px'
        var editormd_toobar = [
                "undo", "redo", "|",
                "h2","h3","h4","h5", "bold", "del", "italic", "quote","kaiSpan","mark",
                "list-ul", "list-ol", "hr", "link", "reference-link",
                "mindmap","echart","imgUpload", "attachment" ,"multimedia","code", "code-block", "htmltable",
                "emoji", "html-entities", "pagebreak",
                "watch", "preview",
                "help"
            ]
    }

    var editor = new MrEditor({
        element: document.getElementById("editor-md"),
        value:$("#editor-md textarea").val(),
        cdn:"{% static '/mr-marked/'%}",
        toolbar:[
            'undo','redo','separator',
            'heading-2','heading-3','heading-4','separator',
            'font','bold','italic','strikethrough','mark','inlinecode','separator',
            'quote','quote-tips','blockcode','unordered-list','ordered-list','task-list','line','separator','link',
            {
                name:'image',
                svg:'<svg t="1726578280610" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14836" width="200" height="200"><path d="M478.1 327.9c-10-9.6-21.8-17.2-35.3-22.9-13.6-5.7-28-8.6-43.2-8.6-15.7 0-30.3 2.8-43.9 8.6-13.6 5.7-25.3 13.3-35.3 22.9-10 9.6-18 20.9-23.9 33.9-6 13-8.9 26.8-8.9 41.4 0 14.6 3 28.4 8.9 41.4 6 13 13.9 24.4 23.9 34.2 10 9.8 21.8 17.6 35.3 23.3 13.6 5.7 28.2 8.6 43.9 8.6 15.2 0 29.6-2.9 43.2-8.6 13.6-5.7 25.3-13.5 35.3-23.3 10-9.8 18-21.2 23.9-34.2 5.9-13 8.9-26.8 8.9-41.4 0-14.6-3-28.4-8.9-41.4-5.9-13.1-13.9-24.4-23.9-33.9z m391.3-203.3H152.5c-48.9 0-88.5 38-88.5 84.9V811c0 46.9 39.6 84.9 88.5 84.9h716.8c48.9 0 88.5-38 88.5-84.9V209.5c0.1-46.9-39.5-84.9-88.4-84.9z m-0.7 570.1c-9.5-21-20.6-42.4-33.2-64.3-12.6-21.9-26.4-41.7-41.4-59.5-15-17.8-31.3-32.3-48.9-43.5-17.6-11.2-35.9-16.8-55-16.8-22.4 0-41.4 4.2-57.1 12.6-15.7 8.5-29.3 19-40.7 31.8-11.4 12.8-21.7 26.5-30.7 41.1-9 14.6-18.1 28.3-27.1 41.1S515.7 660.6 505 669c-10.7 8.4-23.4 12.6-38.2 12.6-14.8 0-27.4-1-37.8-3.1-10.5-2.1-19.9-4.7-28.2-7.9s-16.1-6.7-23.2-10.6c-7.1-3.9-14.9-7.4-23.2-10.6-8.3-3.2-17.8-5.8-28.6-7.9-10.7-2.1-23.4-3.1-38.2-3.1-12.4 0-24.6 3.1-36.8 9.2-12.1 6.2-23.9 14-35.3 23.6-11.4 9.6-22.4 20.3-32.8 32.2-10.5 11.9-20 23.7-28.6 35.6V248c0-21 17.8-38 39.7-38H829c21.9 0 39.7 17 39.7 38v446.7z" fill="#383838" p-id="14837"></path></svg>',
                title:'图片',
                action:function(cm){
                    layer.ready(function(){
                        element.init();
                    });
                    layer.open({
                        type:'1',
                        title:'添加图片',
                        area:['800px','600px'],
                        id:'uploadImg',//配置ID,
                        content:$('#upload-img'),
                    })
                }
            },
            {
                name:'attachment',
                svg:'<svg t="1726626632269" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="24566" width="200" height="200"><path d="M919.893 209.92H529.067c-10.24 0-20.48-5.12-27.307-11.947L397.653 73.387c-6.826-8.534-17.066-11.947-27.306-11.947h-266.24c-37.547-1.707-69.974 29.013-69.974 68.267v764.586c0 39.254 32.427 69.974 69.974 69.974h814.08c39.253 0 69.973-32.427 69.973-69.974V281.6c1.707-39.253-30.72-71.68-68.267-71.68zM713.387 549.547l-204.8 204.8c-25.6 25.6-59.734 39.253-93.867 39.253s-68.267-13.653-93.867-39.253c-25.6-25.6-39.253-58.027-39.253-93.867s13.653-68.267 39.253-93.867L491.52 395.947c11.947-11.947 29.013-11.947 40.96 0s11.947 29.013 0 40.96L361.813 607.573C348.16 621.227 339.627 640 339.627 660.48c0 20.48 8.533 39.253 22.186 52.907 29.014 29.013 76.8 29.013 105.814 0L670.72 510.293c15.36-15.36 15.36-40.96 0-58.026-15.36-15.36-42.667-15.36-58.027 0L411.307 655.36c-1.707 1.707-1.707 6.827 0 8.533 1.706 1.707 6.826 1.707 8.533 0l170.667-170.666c11.946-11.947 29.013-11.947 40.96 0s11.946 29.013 0 40.96L460.8 704.853c-11.947 11.947-27.307 18.774-44.373 18.774S384 716.8 372.053 704.853c-11.946-11.946-18.773-27.306-18.773-44.373s6.827-32.427 18.773-44.373l203.094-203.094C593.92 394.24 617.813 384 645.12 384c25.6 0 51.2 10.24 69.973 29.013 35.84 35.84 35.84 98.987-1.706 136.534z" fill="#333333" p-id="24567"></path></svg>',
                title:'附件',
                action:function(cm){
                    layer.ready(function(){
                        element.init();
                    });
                    layer.open({
                        type:'1',
                        title:'添加附件',
                        area:['800px','600px'],
                        id:'uploadAttach',//配置ID,
                        content:$('#upload-attach'),
                        success: function(layero, index){
                            layer.load(1);
                            $.post('{% url "manage_attachment" %}',{types:2},function(r){
                                $("#attach_table tbody").empty()
                                if(r.status){
                                    //调用分页显示
                                    laypage.render({
                                        elem: 'select-attach-page',//分页的div
                                        count: r.data.length, //数据总数
                                        limit:10, //单页数
                                        jump: function(obj){
                                            //渲染HTML
                                            $("#attach_table tbody").empty();
                                            var thisData = r.data.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit);
                                            layui.each(thisData, function(k, v){
                                                var row = "<tr><td>" + v.filename + "</td><td>"+ v.filesize +"</td><td>"+ v.filetime +"</td><td><button class='layui-btn layui-btn-normal layui-btn-sm' data-name='"+ v.filename +"'  data-path='"+ v.filepath +"' onclick='insertAttach(this)'>选择</button></td></tr>"
                                                // arr.push(row);
                                                $("#attach_table tbody").append(row)
                                            });
                                        }
                                    });
                                    layer.closeAll("loading");//关闭加载提示
                                }else{
                                    layer.closeAll("loading");//关闭加载提示
                                    layer.msg("获取附件失败，请稍后重试！")
                                }
                            })

                        }
                    })
                }
            },
            {
                name:'video',
                svg:'<svg t="1726626731586" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="30109" width="200" height="200"><path d="M737.28 80.65024a30.72 30.72 0 0 1 11.24352 41.96352L689.2544 225.28H839.68a122.88 122.88 0 0 1 122.88 122.88v491.52a122.88 122.88 0 0 1-122.88 122.88H184.32a122.88 122.88 0 0 1-122.88-122.88V348.16a122.88 122.88 0 0 1 122.88-122.88h150.40512l-59.24864-102.66624a30.72 30.72 0 1 1 53.20704-30.72L405.68832 225.28H618.2912l77.02528-133.38624A30.72 30.72 0 0 1 737.28 80.62976z" fill="#131415" p-id="30110"></path><path d="M450.68288 456.3968l163.6352 100.43392c19.6608 12.06272 26.39872 38.8096 15.07328 59.74016-3.66592 6.7584-8.94976 12.36992-15.33952 16.22016l-163.6352 98.79552c-19.72224 11.91936-44.76928 4.52608-55.95136-16.4864A45.9776 45.9776 0 0 1 389.12 693.51424v-199.20896c0-24.1664 18.39104-43.74528 41.0624-43.74528 7.20896 0 14.27456 2.00704 20.50048 5.8368z" fill="#FFFFFF" p-id="30111"></path></svg>',
                title:'视频',
                action:function(cm){
                    layer.open({
                        type:'1',
                        title:'添加音视频外链',
                        area:['800px','600px'],
                        id:'insertMultiMedia',//配置ID,
                        content:$('#insertMultimedia'),
                    })
                }
            },
            {
                name:'table',
                svg:'<svg t="1726628163710" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="31456" width="200" height="200"><path d="M960 591.424V368.96c0-0.288 0.16-0.512 0.16-0.768s-0.16-0.512-0.16-0.768V192a32 32 0 0 0-32-32H96a32 32 0 0 0-32 32v175.424c0 0.288-0.16 0.512-0.16 0.768s0.16 0.48 0.16 0.768v222.464c0 0.288-0.16 0.512-0.16 0.768s0.16 0.48 0.16 0.768V864a32 32 0 0 0 32 32h832a32 32 0 0 0 32-32V592.96c0-0.288 0.16-0.512 0.16-0.768s-0.16-0.512-0.16-0.768z m-560-31.232v-160h208v160H400z m208 64V832H400V624.192h208z m-480-224h208v160H128v-160z m544 0h224v160H672v-160zM896 224v112.192H128V224h768zM128 624.192h208V832H128V624.192zM672 832V624.192h224V832H672z" p-id="31457"></path></svg>',
                title:'表格',
                action:function(cm){
                    layer.ready(function(){
                        element.init();
                    });
                    layer.open({
                        type:1,
                        id:'addTable',
                        title:'添加表格',
                        area:['600px','400px'],
                        content:$("#layer-table"),
                        btn:['确定','取消'], //添加按钮
                        yes:function(index,layero){
                            var current_tab_id = $("#insert-table-div .layui-tab-title .layui-this").attr("lay-id");
                            console.log(current_tab_id)
                            //粘贴的表格
                            if(current_tab_id == 'pasteTable'){
                                // console.log("插入粘贴的表格")
                                editor.insertValue("\n" + $("#pasteExcel").val())
                                layer.close(index)
                            }else{//创建编辑的表格
                                try {
                                    var table_md = convertTable("DataTable1")
                                    // console.log(table_md)
                                    editor.insertValue("\n" + table_md);
                                    layer.close(index)
                                } catch (error) {
                                    layer.msg("请生成表格")
                                }
                            }

                            $("#TableGroup").empty();//清空表格
                            $("#pasteExcel").val('');
                            editor.focus();

                        },
                        btn2:function(index,layero){
                            $("#TableGroup").empty();//清空表格
                            $("#pasteExcel").val('');
                            layer.close(index) // 关闭弹出框
                        }
                    });
                }
            },'separator',
            'formula','graph','mermaid'
        ]
    });

    //粘贴上传图片
    $("#editor-md").on('paste', function (ev) {
        var data = ev.clipboardData;
        var items = (event.clipboardData || event.originalEvent.clipboardData).items;
        for (var index in items) {
            var item = items[index];
            if (item.kind === 'file') {
                var blob = item.getAsFile();
                // console.log(blob)
                var reader = new FileReader();
                reader.onload = function (event) {
                    var base64 = event.target.result;
                    //ajax上传图片
                    layer.load(1);
                    $.ajax({
                        url:"{% url 'upload_doc_img' %}",
                        type:"post",
                        data:{base:base64},
                        success:function(ret){
                            if (ret.success === 1) {
                                //新一行的图片显示
                                layer.closeAll("loading");
                                editor.insertValue("\n![](" + ret.url + ")");
                                editor.focus()
                            }else{
                                layer.closeAll("loading");
                                layer.msg("粘贴图片失败！")
                            }
                        },
                        error:function(xhr){
                            layer.closeAll('loading');
                            if(xhr.status == 403){
                                layer.msg("上传图片失败，请确定拥有图片上传权限！")
                            }else{
                                layer.msg("粘贴上传图片失败，请稍后再试！")
                            }
                        }
                    })
                }; // data url!
                var url = reader.readAsDataURL(blob);
            }
        }
    });
    
    //未保存离开提示
    window.onbeforeunload =function() {
    　　 if(md_changed){
            //console.log("页面未保存数据")
            return 1;
        }else{
            return null;
        }
    };
</script>
